<template>
  <!-- 文章评论列表组件 -->
  <!--
    只有 List 在可视范围内才会检查滚动位置触发 onLoad
   -->
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    :error.sync="error"
    :immediate-check="false"
    error-text="加载失败，请点击重试"
  >
    <!-- <van-cell
      v-for="(item, index) in list"
      :key="index"
      :title="item.content"
    /> -->

    <!-- @reply-click 监听回复按钮，传过来的数据 -->
    <comment-item
      v-for="(item, index) in list"
      :key="index"
      :comment="item"
      @reply-click="$emit('reply-click', $event)"
    ></comment-item>
  </van-list>
</template>

<script>
// 获取文章评论列表API接口
import { getCommentList } from "@/api/comment";
// 渲染评论内容组件
import CommentItem from "./comment-item.vue";
export default {
  // 组件名称
  name: "CommentList",
  // 组件参数 接收来自父组件的数据
  props: {
    source: {
      type: [Number, String, Object],
      required: true,
    },
    //屏蔽data中的list，改成props传参，接收父组件传递过来的评论列表数据。
    list: {
      type: Array,
      // default，默认值，在vue中如果是数组或者对象，需要通过函数的形式返回
      default: () => [],
    },
    type: {
      type: String,
      validator(value) {
        // 对返回过来的数据类型请求进行判断
        return ["a", "c"].includes(value);
      },
      // 默认值
      default: "a",
    },
  },
  // 局部注册的组件
  components: {
    // 渲染评论内容组件
    CommentItem,
  },
  // 组件状态值
  data() {
    return {
      // list: [],
      loading: false,
      finished: false,
      offset: null, // 获取下一页数据的标记（分页，从哪开始取数据）
      limit: 10, // 分页，每页显示多少条
      error: false,
      //   分页总结：
      // pageNum 页码，pageSize 每页条目数
      // page	页码，perPage  每页条目数
      // timestamp 时间戳 ， 每页条目数服务器控制
      // offset 获取下一页数据的标记 ， limit 每页限制显示多少条
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    async onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      try {
        //  1.请求获取数据
        const { data } = await getCommentList({
          type: this.type, // 评论类型，a-对文章(article)的评论，c-对评论(comment)的回复
          // 获取文章id，把获取过来带引号的数据，转换为整型
          source: this.source.toString(),
          // 获取评论数据的偏移量，值为评论id，表示从此id的数据向后取，不传表示从第一页开始读取数据
          offset: this.offset,
          // 获取的评论数据个数，不传表示采用后端服务设定的默认每页数据量
          limit: this.limit,
        });
        console.log(data);
        // 将获取到的文章评论数据传递给父组件
        this.$emit("onload-success", data.data);
        // 2. 将数据添加到列表中
        const { results } = data.data;
        this.list.push(...results);
        // 3. 将loading设置为false
        this.loading = false;
        // 4. 判断是否还有数据
        if (results.length) {
          // 有数据就更新下一页的数据页码
          this.offset = data.data.last_id;
        } else {
          // 没有数据就将 finished 设置结束
          this.finished = true;
        }
      } catch (err) {
        console.log(err);
        this.error = true;
        this.loading = false;
      }
    },
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    // 当你手动初始 onLoad 的话，它不会自动开始初始的 loading （调整慢速网络，进入评论回复界面会发现没有loading）
    // 所以我们要手动的开启初始 loading
    this.loading = true;
    // 页面一加载就获取评论数量
    this.onLoad();
  },
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
};
</script> 

<style scoped lang="less">
</style>